/**
 * 顶部组件输入组件：
 * 具体操作：
 * 1.视图渲染
 * 2.事件绑定处理
 * 3.事件点击处理
 */

import { IInputOptions } from "../typings";
import Component from "./Component";
import List from "./List";

class Input extends Component{
  private options: IInputOptions

  constructor(options: IInputOptions) {
    super()
    this.options = options
  }

  /**
   * 输入视图渲染
   */
  public render() {
    const {placeholderText, buttonText} = this.options
    this.options.wrapperEl.innerHTML += Component.inputView(placeholderText, buttonText)
  }

  /**
   * 事件绑定处理：
   */
  public bindEvent() {
    const oAddBtn: HTMLElement = document.querySelector('.add-btn')
    const oInput: HTMLElement = document.querySelector('.todo-input')
    oAddBtn.addEventListener('click', this.handlerBtnClick.bind(this, oInput), false)
  }

  /**
   * 具体事件处理：handleBtnClick
   */
  public handlerBtnClick(inputDom) {
    const val: string = inputDom.value.trim();
    if (val.length) {
      List.addItem(val)
      inputDom.value = ''
    }
  }
}

export default Input